<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统配置</title>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        /* 系统配置页面样式 */
        .config-container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 操作栏 */
        .action-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        /* VIP 套餐展示区域 */
        .vip-packages {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .vip-package {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            flex: 1;
            position: relative;
        }

        .vip-package h4 {
            margin-top: 0;
        }

        .vip-package p {
            margin: 10px 0;
        }

        .vip-package .price {
            font-size: 18px;
            font-weight: bold;
            color: #28a745;
        }

        .vip-package .delete-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #dc3545;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 12px;
        }

        .vip-package .delete-btn:hover {
            opacity: 0.9;
        }

        /* 按钮样式 */
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .edit-btn {
            background-color: #ffc107;
            color: black;
        }

        .download-btn {
            background-color: #007bff;
            color: white;
        }

        .publish-btn {
            background-color: #28a745;
            color: white;
        }

        .btn:hover {
            opacity: 0.9;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
        }

        .modal-content {
            background-color: white;
            width: 400px;
            padding: 20px;
            border-radius: 8px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        .close-btn {
            font-size: 24px;
            cursor: pointer;
            color: #666;
        }

        .modal-body label {
            display: block;
            margin-bottom: 10px;
        }

        .modal-body input,
        .modal-body select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
        }

        .modal-footer {
            text-align: right;
            margin-top: 20px;
        }

        .modal-footer .btn {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="config-container">
        <div class="action-bar">
            <h2>系统配置</h2>
            <div>
                <button class="btn publish-btn" onclick="openCreateModal()">创建/修改套餐</button>
            </div>
        </div>

        <!-- VIP 套餐展示区域 -->
        <div class="vip-packages" id="vip-packages">
            <!-- VIP 套餐内容将通过 JavaScript 动态生成 -->
        </div>

    </div>

    <!-- 创建/修改套餐模态框 -->
    <div id="create-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>创建/修改 VIP 套餐</h3>
                <span class="close-btn" onclick="closeCreateModal()">&times;</span>
            </div>
            <div class="modal-body">
                <label for="package-type">套餐类型：</label>
                <select id="package-type">
                    <option value="monthly">月费套餐</option>
                    <option value="annual">年费套餐</option>
                    <option value="daily">日费套餐</option>
                </select>

                <label for="duration-days">有效期（天）：</label>
                <input type="number" id="duration-days" min="1" value="30">

                <label for="original-price">原价（元）：</label>
                <input type="number" id="original-price" min="0" step="0.01" value="30.00">

                <label for="discount-rate">优惠率（0-1）：</label>
                <input type="number" id="discount-rate" min="0" max="1" step="0.01" value="0.9">

                <label for="is-discount-active">是否启用折扣：</label>
                <select id="is-discount-active">
                    <option value="true">是</option>
                    <option value="false">否</option>
                </select>
            </div>
            <div class="modal-footer">
                <button class="btn publish-btn" onclick="submitPackage()">提交</button>
                <button class="btn edit-btn" onclick="closeCreateModal()">取消</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            loadVipPackages();
        });

        // 加载 VIP 套餐
        function loadVipPackages() {
            axios.get('http://127.0.0.1:5000/admin/vip-packages')
                .then(response => {
                    const packages = response.data;
                    renderVipPackages(packages);
                })
                .catch(error => {
                    console.error('加载 VIP 套餐失败:', error);
                });
        }

        // 渲染 VIP 套餐
        function renderVipPackages(packages) {
            const vipPackagesContainer = document.getElementById('vip-packages');
            vipPackagesContainer.innerHTML = ''; // 清空现有内容

            packages.forEach(pkg => {
                const packageElement = document.createElement('div');
                packageElement.className = 'vip-package';

                const packageType = pkg.package_type === 'annual' ? '年费套餐' : pkg.package_type === "monthly" ? '月费套餐' : '日费套餐';
                const discountInfo = pkg.is_discount_active ? `（ 折扣优惠：${10-pkg.discount_rate*10}折）` : '';

                packageElement.innerHTML = `
                    <h4>${packageType}</h4>
                    <p>原价：<span class="price">${pkg.original_price} 元</span></p>
                    <p>现价：<span class="price">${pkg.current_price} 元</span> ${discountInfo}</p>
                    <p>有效期：${pkg.duration_days} 天</p>
                    <!-- <p>创建时间：${new Date(pkg.created_at).toLocaleString()}</p>
                    <p>更新时间：${new Date(pkg.updated_at).toLocaleString()}</p> -->
                    <button class="delete-btn" onclick="deletePackage(${pkg.package_id})">删除</button>
                `;

                vipPackagesContainer.appendChild(packageElement);
            });
        }

        // 删除套餐
        function deletePackage(packageId) {
            if (confirm('确定要删除该套餐吗？')) {
                axios.delete(`http://127.0.0.1:5000/admin/vip-packages/${packageId}`)
                    .then(response => {
                        alert(response.data.message);
                        loadVipPackages(); // 重新加载套餐列表
                    })
                    .catch(error => {
                        console.error('删除套餐失败:', error);
                        alert('删除套餐失败，请重试！');
                    });
            }
        }

        // 打开创建/修改套餐模态框
        function openCreateModal() {
            const modal = document.getElementById('create-modal');
            modal.style.display = 'block';
        }

        // 关闭创建/修改套餐模态框
        function closeCreateModal() {
            const modal = document.getElementById('create-modal');
            modal.style.display = 'none';
        }

        // 提交套餐信息
        function submitPackage() {
            const packageData = {
                package_type: document.getElementById('package-type').value,
                duration_days: parseInt(document.getElementById('duration-days').value),
                original_price: parseFloat(document.getElementById('original-price').value),
                discount_rate: parseFloat(document.getElementById('discount-rate').value),
                is_discount_active: document.getElementById('is-discount-active').value === 'true',
            };

            axios.post('http://127.0.0.1:5000/admin/vip-packages', packageData)
                .then(response => {
                    alert(response.data.message);
                    closeCreateModal();
                    loadVipPackages(); // 重新加载套餐列表
                })
                .catch(error => {
                    console.error('提交套餐失败:', error);
                    alert('提交套餐失败，请重试！');
                });
        }

    
    </script>
</body>
</html>